<template>
  <div class="mapToolsContainer">
    <div class="mapTools">
      <div
        v-for="item in basicToolsList"
        :key="item.id"
        :index="item.id"
        class="toolsImg"
        :title="item.name"
        @click="buttonClick(item.id)"
      >
        <img :src="item.icon" >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ZoomIn from '@/assets/images/tools/icon_add.png'
import ZoomOut from '@/assets/images/tools/icon_cut.png'

const basicToolsList = ref([
  {
    name: '放大',
    id: 'zoomIn',
    icon: ZoomIn
  },
  {
    name: '缩小',
    id: 'zoomOut',
    icon: ZoomOut
  }
])

/**
 * 放大视图
 */
const zoomIn = () => {
  if (window.viewer) {
    window.viewer.dCamera.zoomIn()
  }
}

/**
 * 缩小视图
 */
const zoomOut = () => {
  if (window.viewer) {
    window.viewer.dCamera.zoomOut()
  }
}

const buttonClick = (id) => {
  switch (id) {
    case 'zoomIn':
      zoomIn()
      break
    case 'zoomOut':
      zoomOut()
      break
    default:
      break
  }
}
</script>
<style lang="less">
.mapToolsContainer {
  display: flex;
  position: absolute;
  bottom: 58px;
  right: 10px;
  align-items: flex-end;
}
.mapTools {
  flex-direction: column;
  align-items: flex-end;
  user-select: none;
  .toolsImg {
    padding: 0;
    background-color: #0a2545e3;
    margin-top: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 16px;
    }
    &:hover {
      background: #2071f5;
      cursor: pointer;
      img {
        width: 22px;
      }
    }
    &.active {
      background: #2071f5;
    }
  }
}
</style>
